<template>
	<div class="search-small" :class="[{ show: visible }]">
		<div class="coupon" @click="$router.push({ path: '/jd/goods-search' })">
			<i class="iconfont icon-sousuo"></i>
			<div class="swiper">
				<van-field class="input-box" placeholder="搜索商品名称、链接" disabled />
			</div>
		</div>
	</div>
</template>

<script>
import { Field } from 'vant';
export default {
	name: 'Search',
	components: {
		'van-field': Field
	},
	props: {
		shareTemplate: {
			type: Array,
			default: () => {
				return [];
			}
		}
	},
	data() {
		return {
			visible: false
		};
	},
	created() {
		this.show();
	},
	methods: {
		show() {
			this.visible = true;
		},
		hide() {
			this.visible = false;
		}
	}
};
</script>

<style lang="scss" scoped>
.search-small {
	width: 100%;
	z-index: 1000;
	height: 78px;
	text-align: center;
	position: fixed;
	top: -2px;
	opacity: 0;
	transition: 0.5s;
	background: $color-white;
	background-size: 100%;
	padding-top: 10px;
	@include flexBox(center, null);

	&.show {
		opacity: 1;
	}

	.coupon {
		width: 658px;
		height: 60px;
		margin-top: 4px;
		background: #f4f4f4;
		border-radius: 50px;
		padding: 12px 28px;
		@include flexBox(null, center);
		i {
			color: $main-color;
			font-size: 40px;
			margin-right: 20px;
		}
		p {
			color: #8b8b8b;
			font-size: 24px;
		}
		.swiper {
			width: 600px;
			.input-box {
				background: #f4f4f4;
				height: 60px;
				display: flex;
				align-items: center;
			}
		}
	}
}
/deep/.van-swipe {
	.van-swipe__track {
		display: flex;
		flex-direction: column;
	}
}
</style>
